<template>
    <div>
        <el-tabs tab-position="left" v-model="activeName" v-loading="loading">
            <el-tab-pane :label="$i18n.t('CUSTOMER_BASIC_INFO')" name="basic">
                <form-content :data="userDetail.basic" :columnNum="1"></form-content>
            </el-tab-pane>
            <el-tab-pane :label="$i18n.t('CUSTOMER_DETAIL_INFO')" name="detail">
                <form-content :data="userDetail.detail" :columnNum="2"></form-content>
            </el-tab-pane>
            <el-tab-pane :label="$i18n.t('CUSTOMER_MATERIAL_INFO')" name="photo">
                <customer-material :images="userDetail.photo"></customer-material>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import FormContent from '@/components/FormContent'
    import { getCustomerDetail } from '@/api/user'
    import CustomerMaterial from '@/components/customer/Material'

    export default {
        name: 'CustomerDetail',
        components: {
            CustomerMaterial,
            FormContent
        },
        watch: {
            id () {
                this.loading = true
                getCustomerDetail(this.id).then(res => {
                    const { result } = res
                    this.userDetail = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        data () {
            return {
                id: null,
                activeName: 'basic',
                userDetail: {
                    basic: [],
                    detail: [],
                    photo: []
                },
                isShowPictures: false,
                loading: false
            }
        },
        activated () {
            this.id = this.$route.query.id
        },
        created () {
            this.id = this.$route.query.id
        }
    }
</script>

<style scoped>

</style>
